<template>
  <div class="container-fluid">
    <div class="row school-model school-tiao">
      <div class="col school-tiao-left">
        <span>下课点评</span>
      </div>
      <div class="col text-right">
        <a-button-group>
          <a-button @click="add()" type="primary">添加补课学员</a-button>
          <a-button type="primary">
            <router-link :to="{name:'下课点评'}" class="text-white">返回</router-link>
          </a-button>
        </a-button-group>
      </div>
    </div>
    <div class="row school-model index-model">
      <div class="col school-col-table">
        <table class="table table-borderless" v-if="schedule">
          <tbody>
            <tr>
              <td>
                <span>班级：</span>
                <span>{{getschoolclazzbyid( schedule.schoolclazzid).name}}</span>
              </td>
              <td>
                <span>教室：</span>
                <span>{{getschoolclassroombyid( schedule.schoolclassroomid).name}}</span>
              </td>
              <td>
                <span>课程：</span>
                <span>{{ schedule.info }}</span>
              </td>
            </tr>
            <tr>
              <td>
                <span>上课时间：</span>
                <span>{{totime(schedule.starttime)}} &nbsp;{{schedule.schoolclasstime}}</span>
              </td>
              <td>
                <span>教师：</span>
                <span>{{getschooluserbyid( schedule.schooluserid).name}}</span>
              </td>
              <td>
                <span>助教：</span>
                <span>{{ usernameids(schedule.schooluserids) }}</span>
              </td>
            </tr>
          </tbody>
        </table>
        <el-dialog class="school-form" :title="title" width="810px" :visible.sync="setaddress">
          <Makeuplessons
            v-bind="{submit, setsubmit, schoolclazzscheduleid:Number(ID), student: datas}"
          ></Makeuplessons>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" size="mini" :disabled="submit" @click="submit = true">确 定</el-button>
            <el-button @click="setaddress = false" size="mini">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    <div class="row school-model index-model">
      <div class="col-5">
        <span>班级应到人数：{{datas.length}}人</span>
      </div>
      <div class="col-5">
        <span>实到人数：{{tableDatas.length}}人</span>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
    <div
      class="row school-model index-model schoolclazz"
      v-for="(v, i ) in tableDatas"
      :key="`1checkclassevaluation${i}`"
    >
      <div class="col-2 text-center">
        <el-image style="width: 100px; height: 100px; margin-top:15px;" :src="v.headimg" fit="fill"></el-image>
        <br />
        <span>{{v.name}}</span>
      </div>
      <div class="col-8">
        <div class="row school-bottom-24">
          <div class="col">
            <el-radio v-model="v.calendar.type" label="上课">上课</el-radio>
            <el-radio v-model="v.calendar.type" label="请假">请假</el-radio>
            <el-radio v-model="v.calendar.type" label="补课">补课</el-radio>
            <span>
              使用课时:
              <el-input-number
                v-model="v.calendar.hour"
                :min="1"
                size="mini"
                :max="10"
                label="描述文字"
              ></el-input-number>
            </span>
            &nbsp;
            &nbsp;
            &nbsp;
            <span>
              课堂评分：
              <el-rate class="d-inline-block" v-model="v.calendar.grade"></el-rate>
            </span>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <el-input size="mini" v-model="v.calendar.data.title"></el-input>
          </div>
        </div>
        <div class="row" style="padding-top:5px">
          <div class="col"></div>
        </div>
      </div>
      <!-- <div class="col-2"></div> -->
      <div class="col-1">
        <el-button
          type="primary"
          size="mini"
          @click="submitForm(v)"
          v-text="v.calendar.data.title?'修改':'评价'"
        ></el-button>
      </div>
    </div>
    <div
      class="row school-model index-model schoolclazz"
      v-for="(v, i ) in tableData2"
      :key="`2checkclassevaluation${i}`"
    >
      <div class="col-2 text-center">
        <el-image
          style="width: 100px; height: 100px; margin-top:15px;"
          :src="getschoolstudent.find(vo=> v.schoolstudentid ==vo.ID).headimg"
          fit="fill"
        ></el-image>
        <br />
        <span>{{getschoolstudent.find(vo=> v.schoolstudentid ==vo.ID).name}}</span>
      </div>
      <div class="col-8">
        <div class="row school-bottom-24">
          <div class="col">
            <el-radio disabled label="补课">补课</el-radio>
            <span>
              使用课时:
              <el-input-number v-model="v.hour" :min="1" size="mini" :max="10" label="描述文字"></el-input-number>
            </span>
            &nbsp;
            &nbsp;
            &nbsp;
            <span>
              课堂评分：
              <el-rate class="d-inline-block" v-model="v.grade"></el-rate>
            </span>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <el-input size="mini" v-model="v.data.title"></el-input>
          </div>
        </div>
        <div class="row" style="padding-top:5px">
          <div class="col"></div>
        </div>
      </div>
      <!-- <div class="col-2"></div> -->
      <div class="col-1">
        <el-button
          type="primary"
          size="mini"
          @click="submitForm({calendar, v})"
          v-text="v.data.title?'修改':'评价'"
        ></el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  asynccreatschoolclazzstudentcalendar,
  asyncgetschoolclazzschedule
} from "../../../../plugins/api.js";
import Makeuplessons from "../Makeuplessons/index.vue";
import { totime, messagesend } from "../../../utils.js";
export default {
  name: "checkclassevaluation",
  data() {
    return {
      setaddress: false,
      title: "添加时间",
      tableDatas: [],
      datas: [],
      ruleForm: {
        ID: "",
        type: "",
        uid: "",
        schoolstudentid: "",
        schoolclazzscheduleid: ""
      },
      index: 0,
      dialogImageUrl: "",
      dialogVisible: false,
      submit: false,
      tableData2: [],
      schedule: null
    };
  },
  props: ["ID"],
  async mounted() {
    this.start();
  },
  computed: {
    ...mapGetters([
      "getschoolclazz",
      "getschooluser",
      "getschoolclassroom",
      "getschoolstudent",
      "getuser"
    ])
  },
  watch: {
    submit(v) {
      if (v) {
        this.start();
      }
    }
  },
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    totime,
    async start() {
      const n = new Date().toLocaleDateString();
      try {
        const schedule = await asyncgetschoolclazzschedule({
          ID: this.ID,
          starttime: new Date(n),
          uid: true
        });
        this.schedule = schedule[0];
      } catch (err) {
        this.$router.push("/");
        return;
      }
      const {
        schoolclazz,
        schoolclazzstudentcalendar,
        starttime
      } = this.schedule;
      const { schoolstudentschoolclazz } = schoolclazz;
      const ids = schoolstudentschoolclazz
        .filter(v => {
          if (v.type !== "在读") {
            return v.updatedAt > starttime;
          }
          return true;
        })
        .map(v => v.schoolstudentid);
      const data = this.getschoolstudent
        .filter(v => ids.includes(v.ID))
        .map(v => {
          const d = schoolclazzstudentcalendar.find(
            vo => vo.schoolstudentid == v.ID
          );
          if (d) {
            v.calendartype = d.type;
            d.grade = Number(d.grade) || 1;
            v.calendar = d;
            const { data } = d;
            if (!data) {
              v.calendar.data = {
                title: "",
                image: []
              };
            }
          } else {
            v.calendar = {
              type: "",
              uid: "",
              schoolstudentid: v.ID,
              schoolclazzscheduleid: this.ID,
              data: {
                title: "",
                image: []
              }
            };
          }
          return v;
        });
      this.datas = data;
      this.tableDatas = JSON.parse(JSON.stringify(data));
      // 计算补课人员
      this.tableData2 = schoolclazzstudentcalendar.filter(
        v => !ids.includes(v.schoolstudentid)
      );
    },
    add() {
      this.setaddress = true;
      this.title = "添加补课";
    },
    async submitForm(v) {
      try {
        const {
          ID,
          hour,
          data,
          type,
          grade,
          schoolstudentid,
          schoolclazzscheduleid
        } = v.calendar;
        await asynccreatschoolclazzstudentcalendar({
          schoolclazzscheduleid,
          schoolstudentid,
          ID,
          grade,
          hour,
          data,
          type
        });
        if (!ID) {
          const { getuser, schedule } = this;
          await this.messagesend(v, this.ID, getuser, schedule);
        }
        await this.start();
        this.$message.success("已修改");
      } catch (err) {
        this.$message.error("提交失败:" + err);
      }
    },
    changecalendr(v, index) {
      let x = v.calendartype ? "" : "上课";
      v.calendartype = x;
      v.isup = v.isup ? false : true;
      this.tableDatas.splice(index, 1, v);
    },
    usernameids(id) {
      if (id) {
        const data = this.getschooluser.find(v => v.ID == id);
        return data ? data.name : "";
      }
      return "";
    },
    messagesend,
    async setsubmit(n) {
      this.setaddress = false;
      this.submit = n;
      await this.start();
    }
  },
  components: {
    Makeuplessons
  },
  beforeDestroy() {
    this.$store.dispatch("actionschoolstudent");
  }
};
</script>

<style lang="scss" scoped>
.index-model {
  margin-top: 13px;
}
.schoolclazz {
  height: 175px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.school-bottom-24 {
  margin-bottom: 24px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 99px;
  height: 99px;
  line-height: 99px;
  text-align: center;
}
.avatar {
  width: 99px;
  height: 99px;
  display: block;
}
</style>